<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作正在生效的样式</title>

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #af45f8;
        }
    </style>
</head>
<body>


    <button id="butt">点击</button>
    <button id="butt2">点击2</button>
    <br>
    <div class="box1">



    </div>
</body>
    <script type="text/javascript">
        let butt = document.querySelector("#butt");
        let butt2 = document.querySelector("#butt2");
        let box1 = document.querySelector(".box1");

        butt.onclick = function () {
            //读取box1的宽度
            //alert(box1.style.width);

            /*
             * 获取元素的当前显示的样式
             * 	语法：元素.currentStyle.样式名
             * 它可以用来读取当前元素正在显示的样式
             * 	如果当前元素没有设置该样式，则获取它的默认值
             *
             * currentStyle只有IE浏览器支持，其他的浏览器都不支持
             */

            //alert(box1.currentStyle.width);
            //box1.currentStyle.width = "200px";
            //alert(box1.currentStyle.backgroundColor);


            /*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法，可以直接使用
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 *
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	比如：没有设置width，它不会获取到auto，而是一个长度
					 *
					 * 但是该方法不支持IE8及以下的浏览器
					 *
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					 * 	不能修改，如果要修改必须通过style属性
					 */
            //var obj = getComputedStyle(box1,null);

            /*alert(getComputedStyle(box1,null).width);*/
            //正常浏览器的方式
            //alert(getComputedStyle(box1,null).backgroundColor);

            //IE8的方式
            //alert(box1.currentStyle.backgroundColor);

            //alert(getStyle(box1,"width"));

            let computedStyle = getComputedStyle(box1, null);

            console.log(computedStyle.width);
        }


        function getStyle(obj , name){

            if(window.getComputedStyle){
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj , null)[name];
            }else{
                //IE8的方式，没有getComputedStyle()方法
                return obj.currentStyle[name];
            }

            //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];

        }

    </script>


</html>